<template>
  <div class="m-service">
    <div class="row">
      <div class="name">价格</div>
      <div class="content">
        <div class="price"><span class="symbol">{{ $t('priceSymbol') }}</span>{{ info.counterPrice }}</div>
        <div class="spmc-price" v-if="info.spmcBanner"><label class="iconfont icon-lightning"></label>{{ info.spmcBanner.spmcDesc }}</div>
        <div class="href">立即开通 &gt;</div>
      </div>
    </div>
    <div class="row">
      <div class="name">积分</div>
      <div class="content">购买最高可得积分</div>
    </div>
    <div class="row">
      <div class="name">配送</div>
      <div class="content">至 <Address /></div>
    </div>
    <div class="apart"></div>
    <div class="row block">
      <div class="name">服务</div>
      <div class="content block">
        <div class="li" v-for="(item, index) in policy" :key="index">
          <span class="point">･ </span>{{ item.title }}
          &nbsp;&nbsp;&nbsp;&nbsp;
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Address from '../common/Address'

export default {
  props: {
    info: {
      type: Object,
      default: () => {}
    },
    policy: {
      type: Array,
      default: () => []
    }
  },

  components: {
    Address
  }
}
</script>

<style lang="less" scoped>
@import "../../styles/variable";

.m-service {
  background: #f5f3ef;
  border-top: 1px dotted @line-color-light1;
  border-bottom: 1px dotted @line-color-light1;
  font-size: 14px;
  padding: 20px 10px;
  .row {
    align-items: center;
    display: flex;
    padding: 6px 0px;
    .name {
      color: @font-color-six;
      width: 60px;
    }
    .content {
      align-items: center;
      display: flex;
      flex: 1;
      .price {
        color: @color-warning;
        display: inline;
        font-size: 28px;
        line-height: 30px;
        .symbol {
          font-size: 18px;
          line-height: 30px;
        }
      }
      .spmc-price {
        display: inline;
        padding-left: 8px;
        .iconfont {
          background: @font-color-golden-dark;
          border-radius: 2px;
          color: @font-color-golden;
          display: inline-block;
          font-size: 8px;
          width: 18px;
          height: 18px;
          line-height: 18px;
          text-align: center;
          margin-right: 6px;
        }
      }
      .href {
        cursor: pointer;
        display: inline;
        margin-left: 6px;
        line-height: 20px;
        &:hover {
          color: @font-color-golden;
        }
      }
      &.block {
        cursor: pointer;
        display: block;
        .li {
          color: @font-color-six;
          display: inline;
          .point {
            display: inline;
          }
        }
        &:hover {
          text-decoration: underline;
        }
      }
    }
    &.block {
      align-items: flex-start;
    }
  }
  .apart {
    border-bottom: 1px dashed @line-color-light;
    height: 1px;
    margin: 10px 0px;
  }
}
</style>
